import React, { Component } from 'react'
import { Tabs, Badge, List } from 'antd-mobile';
import axios from 'axios'
const Item = List.Item
const Brief = Item.Brief


export default class KTab extends Component {
    state = {
        tabs: [],
        contents: []
    }
    render() {
        return (
            <div className="k-tab">
                <Tabs tabs={this.state.tabs}
                    initialPage={1}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                >
                    {
                        this.state.contents.map((e, i) => {
                            return <div key={i}>
                                <List>
                                    <Item extra={<div><i className="iconfont icon-view"></i>&emsp;<span>27</span></div>} align="bottom" thumb={e[0].thumb} multipleLine>
                                        {e[0].title}<Brief><i className="iconfont icon-icon-time"></i>2小时前</Brief>
                                    </Item>
                                    {
                                        e.map((item, index) => {
                                            return index === 0 ? '' : <Item key={index} arrow="horizontal" onClick={() => { }}>{item.title}</Item>
                                        })
                                    }
                                </List>
                            </div>
                        })
                    }


                </Tabs>
            </div>
        )
    }
    async componentDidMount() {
        const { data } = await axios.get('/data/tablist.json')
        const { tabs, contents } = data
        this.setState({
            tabs, contents
        })
    }
}
